<template>
  <div class="adim">
    <icon-font  type="iconzan" :style="{ fontSize:'40px' }" />
    <icon-font  type="iconkufang" :style="{ fontSize:'40px' }" />
    <el-container>
      <el-header class="el-header">
        <el-row>
          <el-col :span="1">  
          </el-col>
          <el-col :span="1">
             
            <div class="demo-basic--circle">
              <div class="block">
                <el-avatar :size="45" :src="circleUrl"></el-avatar>
              </div>
            </div> 
          </el-col>
          <el-col :span="14" style="text-align:left;">3</el-col>
          <el-col :span="4">
            <div class="demo-basic--circle">
              <div class="block">
                <el-avatar :size="45" :src="circleUrl"></el-avatar>
              </div>
            </div>   
          </el-col>
          <el-col :span="2">
             <el-button icon="el-icon-switch-button" circle></el-button>
          </el-col>
          <el-col :span="2">
             <el-button icon="el-icon-s-home" circle></el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-aside>
        <el-main>
          <div>
            <el-row>
              <el-col :span="19">
                <el-input
                  style="width: 400px"
                  placeholder="请输入搜索内容......"
                ></el-input>
                <el-button type="primary" icon="el-icon-search">搜索</el-button>
              </el-col>
              <el-col :span="2">
                <el-button type="primary" icon="el-icon-search">新增</el-button>
              </el-col>
              <el-col :span="3">
                <el-button type="primary" icon="el-icon-search"
                  >批量删除</el-button
                >
              </el-col>
            </el-row>
          </div>
          <el-table
            :data="tableData"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column label="ID" width="100"> </el-table-column>
            <el-table-column type="selection" width="100"> </el-table-column>
            <el-table-column prop="email" label="分类名称"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  @click="handleClick(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="handleClick(scope.index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
            
              :current-page.sync="currentPages"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="100"
              layout="sizes, prev, pager, next"
              :total="1000"
            >
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>



 <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
    <a-form-model-item has-feedback label="Password" prop="pass">
      <a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
    </a-form-model-item>
    <a-form-model-item has-feedback label="Confirm" prop="checkPass">
      <a-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
    </a-form-model-item>
    <a-form-model-item has-feedback label="Age" prop="age">
      <a-input v-model.number="ruleForm.age" />
    </a-form-model-item>
    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="submitForm('ruleForm')">
        Submit
      </a-button>
      <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
        Reset
      </a-button>
    </a-form-model-item>
  </a-form-model>




  </div>
</template>
<script>
export default {
  name: "Adim",
  data() {
     let checkPending;
    let checkAge = (rule, value, callback) => {
      clearTimeout(checkPending);
      if (!value) {
        return callback(new Error('Please input the age'));
      }
      checkPending = setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('Please input digits'));
        } else {
          if (value < 18) {
            callback(new Error('Age must be greater than 18'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please input the password'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please input the password again'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("Two inputs don't match!"));
      } else {
        callback();
      }
    };
    return {
       ruleForm: {
        pass: '',
        checkPass: '',
        age: '',
      },
      rules: {
        pass: [{ validator: validatePass, trigger: 'change' }],
        checkPass: [{ validator: validatePass2, trigger: 'change' }],
        age: [{ validator: checkAge, trigger: 'change' }],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
    
      input3: "",
      currentPages: 0,
      PageSizes: 10,
      circleUrl:'',
      data: [ ],
      tableData: [ ],
      multipleSelection: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      console.log(this.$refs[formName].resetFields())
      this.$refs[formName].resetFields();
    },






    handleNodeClick(data) {
      console.log(data);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang='scss' scoped>
.el-header {
  border: 1px solid #eee;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  border: 1px solid #eee;
}
.el-aside:first-child {
  border-top: none;
}
.el-main {
  border: 1px solid #eee;
}
</style>